import { Image, Pressable, StyleSheet, Text, View, ScrollView } from 'react-native';
import React, { useState, useEffect } from 'react';
import { useRoute } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import Icon from 'react-native-vector-icons/Ionicons';
import { Picker } from 'react-native-wheel-pick';
import { deviceStore, observer, webSocketStore } from '~/store';
import { NavBarHeader, TransitionModal } from '~/components';
import { px2dp, scale, width } from '~/utils/px2dp';
import { getBleAutomaticTime, setBleAutomaticTime } from '~/utils/ble/application';

const WatchTiming = observer(() => {
    const { t } = useTranslation();
    const router: any = useRoute();
    const minArr = Array.from({ length: 60 }, (_, i) => i);
    const hour1 = [7, 8];
    const hour2 = [12, 13];
    const hour3 = [16, 17];
    const { type, device_sn, subDevice_sn, device_code } = router.params || {};
    const { watchTimeData } = deviceStore;
    const { linkSubDeviceStatus } = webSocketStore;

    // 查询设置定时测量参数
    const [timeData, setTimeData] = useState(watchTimeData);
    const getData = () => {
        getBleAutomaticTime(router.params);
    };
    // 编辑
    const [selectIndex, setSelectIndex] = useState(0);
    const [visible, setVisible] = useState(false);
    const editTime = (index: number) => {
        setSelectIndex(index);
        setVisible(true);
    };
    // 开关
    const setAutomatictime = (index: number) => {
        if (linkSubDeviceStatus == 0 && deviceStore.device.connectedDeviceStatus == 0) {
            Toast.show({ content: t('WatchTiming.t6') });
            return;
        }
        timeData[index] = timeData[index] === 1 ? 0 : 1;
        setTimeData(timeData);
        setBleAutomaticTime(timeData, router.params);
        setTimeout(() => {
            getData();
        }, 300);
    };

    const [hour, setHour] = useState(0);
    const [mine, setMine] = useState(0);

    const onPress = () => {
        switch (selectIndex) {
            case 0:
                timeData[1] = hour || hour1[0];
                timeData[2] = mine || minArr[0];
                setTimeData(timeData);
                break;
            case 3:
                timeData[4] = hour || hour2[0];
                timeData[5] = mine || minArr[0];
                setTimeData(timeData);
                break;
            case 6:
                timeData[7] = hour || hour3[0];
                timeData[8] = mine || minArr[0];
                setTimeData(timeData);
                break;
            default:
                break;
        }
        setAutomatictime(selectIndex);
        setVisible(false);
    };
    useEffect(() => {
        getData();
    }, []);

    return (
        <View style={styles.container}>
            <NavBarHeader title={t('WatchTiming.title')} />
            <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.contentContainerStyle}>
                <View style={styles.tipsCard}>
                    <Text style={styles.tips}>{t('WatchTiming.t1')}</Text>
                </View>
                {/* 第一个时间段 */}
                <View style={[styles.list, styles.row]}>
                    <View>
                        <Text style={styles.title}>
                            {watchTimeData[1] > 9 ? watchTimeData[1] : '0' + watchTimeData[1]}:
                            {watchTimeData[2] > 9 ? watchTimeData[2] : '0' + watchTimeData[2]}
                        </Text>
                        <Text style={[styles.commenTop, styles.t1]}>{t('WatchTiming.t2')}</Text>
                    </View>
                    <View>
                        <Pressable style={styles.row} onPress={() => editTime(0)}>
                            <Text style={styles.edit}>{t('WatchTiming.t3')}</Text>
                            <Icon name="chevron-forward-outline" size={18} color={'#a4a4a4'}></Icon>
                        </Pressable>
                        <Pressable style={styles.commenTop} onPress={() => setAutomatictime(0)}>
                            <Image
                                source={{
                                    uri: `https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/alarm_clock/${
                                        watchTimeData[0] === 1 ? 'open.png' : 'shut.png'
                                    }`,
                                }}
                                resizeMode="contain"
                                style={styles.switchIcon}
                            />
                        </Pressable>
                    </View>
                </View>
                {/* 第二个时间段 */}
                <View style={[styles.list, styles.row]}>
                    <View>
                        <Text style={styles.title}>
                            {watchTimeData[4] > 9 ? watchTimeData[4] : '0' + watchTimeData[4]}:
                            {watchTimeData[5] > 9 ? watchTimeData[5] : '0' + watchTimeData[5]}
                        </Text>
                        <Text style={[styles.commenTop, styles.t1]}>{t('WatchTiming.t2')}</Text>
                    </View>
                    <View>
                        <Pressable style={styles.row} onPress={() => editTime(3)}>
                            <Text style={styles.edit}>{t('WatchTiming.t3')}</Text>
                            <Icon name="chevron-forward-outline" size={18} color={'#a4a4a4'}></Icon>
                        </Pressable>
                        <Pressable style={styles.commenTop} onPress={() => setAutomatictime(3)}>
                            <Image
                                source={{
                                    uri: `https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/alarm_clock/${
                                        watchTimeData[3] === 1 ? 'open.png' : 'shut.png'
                                    }`,
                                }}
                                resizeMode="contain"
                                style={styles.switchIcon}
                            />
                        </Pressable>
                    </View>
                </View>
                {/* 第三个时间段 */}
                <View style={[styles.list, styles.row]}>
                    <View>
                        <Text style={styles.title}>
                            {watchTimeData[7] > 9 ? watchTimeData[7] : '0' + watchTimeData[7]}:
                            {watchTimeData[8] > 9 ? watchTimeData[8] : '0' + watchTimeData[8]}
                        </Text>
                        <Text style={[styles.commenTop, styles.t1]}>{t('WatchTiming.t2')}</Text>
                    </View>
                    <View>
                        <Pressable style={styles.row} onPress={() => editTime(6)}>
                            <Text style={styles.edit}>{t('WatchTiming.t3')}</Text>
                            <Icon name="chevron-forward-outline" size={18} color={'#a4a4a4'}></Icon>
                        </Pressable>
                        <Pressable style={styles.commenTop} onPress={() => setAutomatictime(6)}>
                            <Image
                                source={{
                                    uri: `https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/alarm_clock/${
                                        watchTimeData[6] === 1 ? 'open.png' : 'shut.png'
                                    }`,
                                }}
                                resizeMode="contain"
                                style={styles.switchIcon}
                            />
                        </Pressable>
                    </View>
                </View>
            </ScrollView>
            <TransitionModal visible={visible} toggleVisible={() => setVisible(false)} title={t('WatchTiming.t4')}>
                <View>
                    <View style={[styles.row]}>
                        <Picker
                            style={styles.pciker}
                            itemStyle={styles.itemStyle}
                            textSize={12}
                            pickerData={selectIndex == 0 ? hour1 : selectIndex == 3 ? hour2 : hour3}
                            onValueChange={(index) => {
                                const time = index > 10 ? index : index.toString().padStart(2, '0');
                                setHour(time);
                            }}
                        />
                        <Picker
                            style={styles.pciker}
                            itemStyle={styles.itemStyle}
                            textSize={12}
                            pickerData={minArr}
                            onValueChange={(index) => {
                                const time = index > 10 ? index : index.toString().padStart(2, '0');
                                setMine(time);
                            }}
                        />
                    </View>
                    <Pressable style={styles.bootom_button} onPress={onPress}>
                        <Text style={styles.bootom_buttonText}>{t('WatchTiming.t5')}</Text>
                    </Pressable>
                </View>
            </TransitionModal>
        </View>
    );
});
export default WatchTiming;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    contentContainerStyle: {
        paddingBottom: '20%',
        flexGrow: 1,
        marginTop: px2dp(32),
    },
    list: {
        backgroundColor: '#fff',
        marginHorizontal: px2dp(32),
        marginTop: px2dp(32),
        padding: px2dp(24),
        borderRadius: px2dp(20),
        justifyContent: 'space-between',
    },
    title: {
        fontSize: scale(56),
        fontWeight: 'bold',
        color: '#000',
    },
    t1: {
        color: '#a4a4a4',
        fontSize: scale(24),
    },
    switchIcon: {
        width: px2dp(100),
        height: px2dp(50),
    },
    edit: {
        color: '#a4a4a4',
        fontSize: scale(24),
        marginRight: px2dp(6),
    },
    commenTop: {
        marginTop: px2dp(64),
    },
    tipsCard: {
        backgroundColor: '#F2DBBC',
        padding: px2dp(24),
        borderRadius: px2dp(16),
        marginHorizontal: px2dp(32),
    },
    tips: {
        textAlign: 'left',
        lineHeight: px2dp(40),
        fontSize: scale(28),
        marginTop: px2dp(12),
        color: '#84715D',
        fontWeight: 'bold',
    },
    pciker: {
        marginTop: px2dp(32),
        height: px2dp(400),
        width: (width - px2dp(32)) / 2,
        backgroundColor: '#fff',
    },
    itemStyle: {
        color: '#191919',
        fontSize: px2dp(28),
        fontWeight: 'bold',
    },
    bootom_button: {
        backgroundColor: '#1877FF',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: px2dp(16),
        height: px2dp(100),
        marginTop: '10%',
        width: '100%',
    },
    bootom_buttonText: {
        color: '#fff',
        fontSize: scale(32),
        fontWeight: 'bold',
    },
});
